$(document).ready(function() {
	var anc_onglet;
charger_onglets();

function charger_onglets(){
	//récupération des tests
	var xhr = getXMLHttpRequest();

	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			creer_onglets(xhr.responseXML);
		} 
	};
	xhr.open("POST", "charger_onglet.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send();
}

function creer_onglets(oData){
	//création des onglets et de leur contenu
	var div = document.getElementById('onglets');
	var content = document.getElementById('contenu_onglets');
	var nodes = oData.getElementsByTagName("item");
	anc_onglet = nodes[0].getAttribute("name");				
	
	var array = new Array();
	var array2 = new Array();
	var nom, li, text, para, select, lab, text2,span, text3;
	
	for (var k=0; k<nodes.length; k++) {
		var id2=nodes[k].getAttribute("id");
		nom=nodes[k].getAttribute("name");
		
		if(id2!="exp"){
			array2.push(nom);
			//création des onglets
			li=document.createElement("li");
			li.className="inactive";
			li.id="onglet_"+nom;
			
			text=document.createTextNode(nom);
			li.appendChild(text);
			div.appendChild(li);
			ajouter_click(nom);
			
			//création du contenu des onglets
			para = document.createElement("p");
			para.className="contenu_onglet";
			para.id="contenu_onglet_"+nom;
			
			if (nom == "+") {
				para = creer_champs(para,"input","newTab","Nom nouvel onglet: ", "[a-zA-Z\\s]+");
			}
			
			// champ date 
			para = creer_champs(para,"input","date_"+nom,"Date du test: ");
			
			//champ expérimentateur
			lab = document.createElement("label");
			lab.className="label";
			text2 = document.createTextNode("Expérimentateur: ")
			lab.appendChild(text2);
			select=document.createElement("select");
			select.name="select_"+nom;
			select.id="select_"+nom;
			select=creer_option(select,"Sélection","none");
			
			span = document.createElement("span");
			span.id="erreur_select_"+nom;
			span.className="code3";
			text3 = document.createTextNode("* Sélectionner un expérimentateur");
			span.appendChild(text3);
			
			para.appendChild(lab);
			para.appendChild(select);
			para.appendChild(span);
			
			var space= document.createElement("br");
			para.appendChild(space);
			
			// champ mesure
			para = creer_champs(para,"input","mesure_"+nom,"Valeur:");
			
			//champ unite
			select=document.createElement("select");
			select.name="select_unite"+nom;
			select.id="unite";
			select=creer_option(select,"Choissisez l'unité","");
			select=creer_option(select,"Ajouter nouvelle unité","-1");
			para.appendChild(select);

			// champ nouvelle unite
			para = creer_champs(para,"input-hidden","newUnite_"+nom,"");
			
			var space= document.createElement("br");
			para.appendChild(space);
			
			//champ description 
			para = creer_champs(para,"textarea","description_"+nom,"Description: ");
						
			//bouton valider
			var bouton = document.createElement("input");
			bouton.type="submit";
			bouton.value="Valider";
			bouton.className="bouton";
			para.appendChild(bouton);
			content.appendChild(para);
		}
		else{
			array.push(nom);
		}
	}
	//création des options du select contenant la liste des expérimentateurs
	for (var i=0; i<array2.length;i++){
		var nom2 = array2[i];
		for (var j=0; j<array.length;j++){
			var option = array[j];
			var id=document.getElementById("select_"+nom2);
			creer_option(id,option,option);
		}
	}
	
	//champs caché pour pouvoir récupérer le nom de l'onglet actif pour remplir la BD
	var	input = document.createElement("input");
	input.type="hidden";
	input.value="";
	input.id="nom_onglet";
	input.name="nom_onglet";
	para.appendChild(input);
	
	changer_onglet(anc_onglet);
}
function creer_option(oSelect,nom,nom2){
	//ajout d'une option au select
	var oOption2 =  document.createElement("option");
	var oInner2 = document.createTextNode(nom);
	oOption2.value = nom2;
	oOption2.appendChild(oInner2);
	oSelect.appendChild(oOption2);
	return oSelect;
}

function creer_champs(para,type,nom,labeltext, pattern){
	pattern = pattern || null;
	//création d'un élément html de type label
	var space = document.createElement("br");
	var label = document.createElement("label");
	label.className="label";
	
	var text = document.createTextNode(labeltext);
	
	//création d'un élément html de type input
	var	input = document.createElement("input");
	input.className="box";
	input.name=nom;
	
	if(type=="input"){
		input.type="text";
	}

	if(labeltext=="Date du test: "){
		input.type="text";
		input.id="datepicker";
	}
	
	// not really hidden type, just hide it with css
	if(type=="input-hidden") {
		input.type="text";
		input.setAttribute("style", "display:none");
		input.setAttribute("id", "newUnite");
	}
	
	if (pattern != null) {
		input.setAttribute("pattern", pattern);
	}
	
	//création de l'élément html span qui contiendra le label et l'input créés précédemment
	var span = document.createElement("span");
	span.id = "erreur_"+nom;
	span.className = "code3";
	var text2 = document.createTextNode("* Remplir le champ");
	span.appendChild(text2);
	 
	label.appendChild(text);
	if(labeltext != "") {
		para.appendChild(label);
	}
	para.appendChild(input);
	para.appendChild(span);
	if(labeltext != "Valeur:" && labeltext != "") {
		para.appendChild(space);
	}
	return para;
}
	
function ajouter_click(nom){
	//ajout d'un lien cliquable sur les onglets
	var temp = document.getElementById("onglet_"+nom);				
	temp.onclick=function(){changer_onglet(nom);};
}

function changer_onglet(name){
	//permet de changer d'onglet courant
	document.getElementById("onglet_"+anc_onglet).className = "inactive";
	document.getElementById("onglet_"+name).className = "active";

	document.getElementById("contenu_onglet_"+anc_onglet).style.display = "none";
	document.getElementById("contenu_onglet_"+name).style.display = "inline-block";

	document.getElementById("nom_onglet").value=name;
	anc_onglet = name;
}

function verif_form(f){ 
	//vérification du formulaire avant l'envoie au serveur
	var onglet = document.getElementsByClassName("active");
	var nom;
	for (var i=0; i<onglet.length;i++){
		var temp = onglet[i].id;
		var temp2 = temp.split("_");
		nom = temp2[1];
	}
	
	var dateOk = verifDate(f.elements["date_"+nom]);
	var expOk = verifSelect(f.elements["select_"+nom]);
	var mesureOk = verif(f.elements["mesure_"+nom]);
	
	if(dateOk && expOk && mesureOk){
		return true;
	}
	else{
		alert("Veuillez remplir correctement tous les champs");
		return false;
	}
}

setTimeout(function() {
	$("#datepicker").datepicker();
	
	$("#unite option:first").after(unitlist);
	
	$(document).on("change", "#unite", function() {
		if($(this).val() == "-1") {
			$("#newUnite").val('');
			$("#newUnite").css("display", "inline-block");
		}
		else {
			$("#newUnite").attr('value',$(this).val());
			$("#newUnite").css("display", "none");
		}
	});
	
	$('#newUnite').keypad({keypadOnly: false,
	    layout: ['abcde', 'ghijk', 'lmnop', 'qrstu','vwxyz','αβγδεζ', 'ηθικλμ', 'νξοπρσ', 'τυφχψω', $.keypad.SHIFT],
	    prompt: ''});
}, 800);
});